<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录App用户行为数据分析</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <script type="text/javascript" src="/static/js/vue.min.js"></script>
    <script type="text/javascript" src="/static/js/index.js"></script>
    <script type="text/javascript" src="/static/js/echarts.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
</head>
<body>
<div id="app">
    <div id="admin">
        <div class="pos" v-loading="loading">
            <h1 class="adminh1">App用户行为数据分析</h1>
            <el-form
                    :model="Form"
                    status-icon
                    :rules="Rules"
                    ref="Form"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="用户名：" prop="username">
                    <el-input
                            prefix-icon="el-icon-user"
                            style="width: 250px"
                            type="text"
                            v-model="Form.username"
                            autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="密 码：" prop="password">
                    <el-input
                            prefix-icon="el-icon-menu"
                            style="width: 250px"
                            show-password
                            type="password"
                            v-model="Form.password"
                            autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 250px" type="primary" @click="submitForm('Form')"
                    >登录
                    </el-button
                    >
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            var validateusername = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入用户信息"));
                } else {
                    if (this.Form.password !== "") {
                        this.$refs.Form.validateField("password");
                    }
                    callback();
                }
            };
            var validatepassword = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入密码"));
                } else if (value.length < 6 || value.length > 13) {
                    callback(new Error("长度必须在6-12之内!"));
                } else {
                    callback();
                }
            };
            return {
                loading: false,
                Form: {
                    username: "",
                    password: "",
                },
                Rules: {
                    username: [{validator: validateusername, trigger: "blur"}],
                    password: [{validator: validatepassword, trigger: "blur"}],
                },
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var that = this;
                        $.ajax({
                            type: 'post',
                            url: "http://127.0.0.1:8000/login/",//这里是url
                            data:{username:that.Form.username,password:that.Form.password,csrfmiddlewaretoken: '{{ csrf_token }}'},
                            dataType: "json",
                            success: function (datat) {
                                //console.log(datat)
                                if(datat.res==="账号或密码错误"){
                                    that.$message.error('账号或密码错误');
                                }else {
                                    window.location.href = datat.res;
                                }
                            }
                        })
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
    });
</script>

<style>
    * {
        padding: 0;
        margin: 0;
    }


    #app {
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
    }

    #admin {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -200px;
        margin-left: -250px;
        width: 500px;
        height: 300px;
        background: #fff;
        border-radius: 5%;
    }

    .adminh1 {
        margin: 20px 0;
        text-align: center;
    }

    .pos {
        width: 450px;
        height: 250px;
        position: absolute;
        top: 25px;
        left: 25px;
    }
</style>
</body>
</html>